<template>
  <div>
    <ComTable
      @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange"
      :config="config"
      :pagination="{
        total: pageing.total,
        pageNum: pageing.pageNum,
        pageSize: pageing.pageSize,
      }"
      :list="getinvoicelisttable"
      :modes="consumptionModes"
    >
    <el-table-column
        label="申请时间"
        prop="createdTime"
        width="80">
        <template slot-scope="scope">
          <el-popover placement="top-start" trigger="hover" :content="scope.row.createdTime" v-if="scope.row.createdTime">
            <p slot="reference">
              {{ getTime(scope.row.createdTime) }}
            </p>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        label="开票时间"
        prop="updatedTime"
        width="100">
        <template slot-scope="scope">
          <el-popover placement="top-start" trigger="hover" :content="scope.row.updatedTime" v-if="scope.row.updatedTime">
            <p slot="reference">
              {{ getTime(scope.row.updatedTime) }}
            </p>
          </el-popover>
        </template>
      </el-table-column>
       <el-table-column
        label="邮寄时间"
        prop="kdTime"
        width="100">
        <template slot-scope="scope">
          <el-popover placement="top-start" trigger="hover" :content="scope.row.kdTime" v-if="scope.row.kdTime">
            <p slot="reference">
              {{ getTime(scope.row.kdTime) }}
            </p>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column align="left" width="100" label="发票状态">
        <template slot-scope="scope">
          <span
            @click="
              drawer = true;
              RowClickFn(scope.row);
            "
            style="color: #f87a23"
            >{{ selecstatus(scope.row.status) }}</span
          >
        </template>
      </el-table-column>
    </ComTable>
    <!--已开票 -->
    <Comdrawer
      size="55%"
      title="发票详情"
      @eventColse="handleClose"
      :drawer="drawer"
      v-if="oderlist.status == 2 ? true : false"
    >
      <template #title>
        <p class="drawer-title">{{ selecstatus(oderlist.status) }}</p>
      </template>
      <div class="codeclass">
        <span>发票代码：{{ oderlist.no }}</span>
      </div>
      <div class="businEdit">
        <el-row>
          <el-col>
            <el-descriptions
              title="发票信息"
              :column="1"
              :contentStyle="CS"
              :label-style="LS"
            >
              <el-descriptions-item label="发票类型">{{
                selectype(oderlist.type)
              }}</el-descriptions-item>
              <el-descriptions-item label="抬头类型">{{
                selecttitle(oderlist.titleType)
              }}</el-descriptions-item>
              <el-descriptions-item label="发票抬头">{{
                oderlist.title
              }}</el-descriptions-item>
              <el-descriptions-item label="企业税号">{{
                oderlist.sh
              }}</el-descriptions-item>
               <el-descriptions-item label="注册电话">{{
                oderlist.phone
              }}</el-descriptions-item>
              <el-descriptions-item label="注册地址">{{
                oderlist.zcdz
              }}</el-descriptions-item>
              <el-descriptions-item label="开户银行">{{
                oderlist.khyh
              }}</el-descriptions-item>
              <el-descriptions-item label="银行账号">{{
                oderlist.yhzh
              }}</el-descriptions-item>
              <el-descriptions-item label="发票金额">{{
                oderlist.amount
              }}</el-descriptions-item>
            </el-descriptions>
            <el-divider></el-divider>
          </el-col>
          <el-col style="margin: 10px 0">
            <el-descriptions
              title="收件信息"
              :column="1"
              :contentStyle="CS"
              :label-style="LS"
            >
              <el-descriptions-item label="邮箱">{{
                oderlist.email
              }}</el-descriptions-item>
              <el-descriptions-item label="收件人">{{
                oderlist.sjr
              }}</el-descriptions-item>
              <el-descriptions-item label="手机号">{{
                oderlist.phone
              }}</el-descriptions-item>
              <el-descriptions-item label="地址">
               {{ province }}{{ city }}{{location}}{{oderlist.address}}
              </el-descriptions-item>
            </el-descriptions>
            <el-divider></el-divider>
          </el-col>
          <el-col>
            <el-descriptions
              :contentStyle="CS"
              :label-style="LS"
              title="所含订单"
              :column="1"
            >
              <el-descriptions-item
                :label="`订单${index+1}`"
                v-for="(ele, index) in oderlist.orderList"
                :key="ele.id"
              >
                {{ ele.remark }}
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
          <el-col>
            <div v-show="vshow" class="formbtn">
              <el-form
                :inline="true"
                :model="formInline"
                :rules="rules"
                ref="ruleForm"
                label-width="100px"
                class="demo-form-inline"
              >
                <el-form-item prop="kddh">
                  <el-input
                    v-model="formInline.kddh"
                    placeholder="请输入快递单号"
                  ></el-input>
                </el-form-item>
                <el-form-item prop="kdgs">
                  <el-input
                    v-model="formInline.kdgs"
                    placeholder="请输入快递公司"
                  ></el-input>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
        </el-row>
        <SubBtn>
          <template slot="btn" v-if="makeinvoice">
            <!-- <el-button round  
                  >打印发票</el-button
                > -->
            <el-button round class="addBtn" @click="invoiceclick"
              >邮寄发票</el-button
            >
          </template>
          <template slot="btn" v-if="!makeinvoice">
            <el-form
              :inline="true"
              :model="formInline"
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-form-inline"
            >
              <el-form-item prop="kddh">
                <el-input
                  size="mini"
                  v-model="formInline.kddh"
                  placeholder="请输入快递单号"
                ></el-input>
              </el-form-item>
              <el-form-item prop="kdgs">
                <el-input
                  size="mini"
                  v-model="formInline.kdgs"
                  placeholder="请输入快递公司"
                ></el-input>
              </el-form-item>
              <el-form-item prop="kdTime">
                <el-date-picker
                  size="mini"
                  value-format="yyyy-MM-dd hh:mm:ss"
                  v-model="formInline.kdTime"
                  type="datetime"
                  placeholder="选择日期时间"
                >
                </el-date-picker>
              </el-form-item>
            </el-form>
            <!-- <el-input  v-model="Invoicecode" placeholder="请输入快递公司"></el-input>
                <el-input  v-model="Invoicecode" placeholder="请输入快递单号"></el-input> -->
            <el-button round class="addBtn" @click="submitForm('ruleForm')"
              >确定</el-button
            >
            <el-button round @click="cancel">取消</el-button>
          </template>
        </SubBtn>
      </div>
    </Comdrawer>
    <!-- 未开票】 -->
    <Comdrawer
      size="50%"
      title="发票详情"
      @eventColse="handleClose"
      :drawer="drawer"
      v-else-if="oderlist.status == 1 ? true : false"
    >
      <template #title>
        <p class="drawer-title">{{ selecstatus(oderlist.status) }}</p>
      </template>
      <div class="codeclass">
        <span>发票代码：{{ oderlist.no }}</span>
      </div>

      <div class="businEdit">
        <el-row>
          <el-col>
            <el-descriptions
              title="发票信息"
              :column="1"
              :contentStyle="CS"
              :label-style="LS"
            >
              <el-descriptions-item label="发票类型">{{
                selectype(oderlist.type)
              }}</el-descriptions-item>
              <el-descriptions-item label="抬头类型">{{
                selecttitle(oderlist.titleType)
              }}</el-descriptions-item>
              <el-descriptions-item label="发票抬头">{{
                oderlist.title
              }}</el-descriptions-item>
              <el-descriptions-item label="企业税号">{{
                oderlist.sh
              }}</el-descriptions-item>
              <el-descriptions-item label="注册地址">{{
                oderlist.zcdz
              }}</el-descriptions-item>
               <el-descriptions-item label="注册电话">{{
                oderlist.phone
              }}</el-descriptions-item>
              <el-descriptions-item label="开户银行">{{
                oderlist.khyh
              }}</el-descriptions-item>
              <el-descriptions-item label="银行账号">{{
                oderlist.yhzh
              }}</el-descriptions-item>
              <el-descriptions-item label="发票金额">{{
                oderlist.amount
              }}</el-descriptions-item>
            </el-descriptions>
            <el-divider></el-divider>
          </el-col>

          <el-col style="margin: 10px 0">
            <el-descriptions
              title="收件信息"
              :column="1"
              :contentStyle="CS"
              :label-style="LS"
            >
              <!-- <el-descriptions-item label="邮箱">{{
                oderlist.email
              }}</el-descriptions-item> -->
              <el-descriptions-item label="收件人">{{
                oderlist.sjr
              }}</el-descriptions-item>
              <el-descriptions-item label="手机号">{{
                oderlist.phone
              }}</el-descriptions-item>
              <el-descriptions-item label="地址">
                {{ province }}{{ city }}{{location}}{{oderlist.address}}
                </el-descriptions-item>
            </el-descriptions>
            <el-divider></el-divider>
          </el-col>

          <el-col>
            <el-descriptions
              title="所含订单"
              :column="1"
              :contentStyle="CS"
              :label-style="LS"
            >
              <el-descriptions-item
                :label="`订单${index+1}`"
                v-for="(ele, index) in oderlist.orderList"
                :key="ele.id"
              >
                {{ ele.remark }}
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>
        <SubBtn>
          <template slot="btn">
            <el-button
              round
              class="addBtn"
              v-if="makeinvoice"
              @click="invoiceclick"
              >完成开票</el-button
            >
          </template>
          <template slot="btn" v-if="invoice">
            <el-input
              v-model="Invoicecode"
              placeholder="请输入发票代码"
              size="mini"
              style="margin:5px"
            ></el-input>
            <!-- v-hasPermi="['financial:invoice:edit']" -->
            <el-button round class="addBtn" @click="submit(oderlist)" >确定</el-button>
            <el-button round @click="cancel">取消</el-button>
          </template>
        </SubBtn>
      </div>
    </Comdrawer>
    <Comdrawer
      size="50%"
      title="发票详情"
      @eventColse="handleClose"
      :drawer="drawer"
      v-else
    >
      <template #title>
        <p class="drawer-title">已邮寄</p>
      </template>
      <div class="codeclass">
        <span>发票代码：{{ oderlist.no }}</span>
      </div>
      <div class="businEdit">
        <el-row>
          <el-col>
            <el-descriptions
              title="发票信息"
              :column="1"
              :contentStyle="CS"
              :label-style="LS"
            >
              <el-descriptions-item label="发票类型">{{
                selectype(oderlist.type)
              }}</el-descriptions-item>
              <el-descriptions-item label="抬头类型">{{
                selecttitle(oderlist.titleType)
              }}</el-descriptions-item>
              <el-descriptions-item label="发票抬头">{{
                oderlist.title
              }}</el-descriptions-item>
              <el-descriptions-item label="企业税号">{{
                oderlist.sh
              }}</el-descriptions-item>
              <el-descriptions-item label="注册地址">{{
                oderlist.zcdz
              }}</el-descriptions-item>
               <el-descriptions-item label="注册电话">{{
                oderlist.phone
              }}</el-descriptions-item>
              <el-descriptions-item label="开户银行">{{
                oderlist.khyh
              }}</el-descriptions-item>
              <el-descriptions-item label="银行账号">{{
                oderlist.yhzh
              }}</el-descriptions-item>
              <el-descriptions-item label="发票金额">{{
                oderlist.amount
              }}</el-descriptions-item>
            </el-descriptions>
            <el-divider></el-divider>
          </el-col>

          <el-col style="margin: 10px 0">
            <el-descriptions
              title="收件信息"
              :column="1"
              :contentStyle="CS"
              :label-style="LS"
            >
              <el-descriptions-item label="邮箱">{{
                oderlist.email
              }}</el-descriptions-item>
              <el-descriptions-item label="收件人">{{
                oderlist.sjr
              }}</el-descriptions-item>
              <el-descriptions-item label="手机号">{{
                oderlist.phone
              }}</el-descriptions-item>
              <el-descriptions-item label="地址">{{
                oderlist.address
              }}</el-descriptions-item>
            </el-descriptions>
            <el-divider></el-divider>
          </el-col>
          <el-col>
            <el-descriptions
              title="物流信息"
              :column="1"
              :contentStyle="CS"
              :label-style="LS"
            >
              <el-descriptions-item label="承运快递">{{
                oderlist.kdgs
              }}</el-descriptions-item>
              <el-descriptions-item label="物流编号">{{
                oderlist.kddh
              }}</el-descriptions-item>
            </el-descriptions>
          </el-col>
          <el-col>
            <el-descriptions
              title="所含订单"
              :column="1"
              :contentStyle="CS"
              :label-style="LS"
            >
              <el-descriptions-item
                :label="`订单${index+1}`"
                v-for="(ele, index) in oderlist.orderList"
                :key="ele.id"
              >
                {{ ele.remark}}
                
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>
      </div>
    </Comdrawer>
  </div>
</template>

<script>
import ComTable from "@/wss/components/comTable.vue";
import Comdrawer from "@/wss/components/Comdrawer.vue";
import { getinvoicelist } from "@/wss/newApi_3-24/askAround/index";
import SubBtn from "@/components/subBtn/subBtn.vue";

import {
  getinvoiceidlist,
  editinvoiceidlist,
} from "@/wss/newApi_3-24/askAround/index";
//引入省市区数据的插件
import { CodeToText } from "element-china-area-data";
export default {
  name: "Information",
  components: { ComTable, Comdrawer, SubBtn },
  data() {
    return {
      // 表格配置
      config: {
        // border: true,
        isAdd: false,
        loading: false,
      },
      makeinvoice: true,
      Invoicecode: "", //发票代码
      uninvoice: false, //未开票按钮显示隐藏
      invoice: false, //开票按钮显示隐藏
      postinvoice: true, //邮寄发票

      //邮寄显示隐藏
      vshow: false,
      userid: "",
      CS: {
        "min-width": "50px", //最小宽度
        "word-break": "break-all", //过长时自动换行
        color: "#232323",
      },
      LS: {
        color: "#999999",
        height: "20px",
        "min-width": "110px",
        "word-break": "keep-all",
      },
      formInline: {
        kddh: "",
        kdgs: "",
        kdTime: "",
      },
      consumptionModes: [
        {
          label: "发票代码",
          mode: "no",
          showOverflowTooltip: true,
        },

        {
          label: "发票类型",
          mode: "type",
          showOverflowTooltip: true,

          options: [
            {
              l: "增值税普通发票 ",
              v: 1,
            },
            {
              l: "增值税专用发票 ",
              v: 2,
            },
          ],
        },
        {
          label: "开票金额（元）",
          mode: "amount",
          align: "right",
          showOverflowTooltip: true,
        },
        
        // {
        //   label: "申请时间",
        //   mode: "createdTime",
        //   showOverflowTooltip: true,
        // },
        // {
        //   label: "开票时间",
        //   mode: "updatedTime",
        //   showOverflowTooltip: true,
        // },

        // {
        //   label: "邮寄时间",
        //   mode: "kdTime",
        //   showOverflowTooltip: true,
        // },
      ],
      rules: {
        kddh: [{ required: true, message: "请输入快递单号", trigger: "blur" }],
        kdgs: [{ required: true, message: "请输入快递公司", trigger: "blur" }],
        kdTime: [
          { required: true, message: "请选择快递时间", trigger: "blur" },
        ],
      },
       // 发票记录列表
      getinvoicelisttable: [],
      // 问圈ID
      masetrid: "",
      // 父主键传过来搜索参数
      seachdata: {},
      // 分页参数
      pageing: { pageNum: 1, pageSize: 10, total: 0 },
      //编辑抽屉是否弹出
      drawer: false,
      //发票详情数据
      oderlist: [],
       province: "", //省
      city: "", //市
      location: "", //区
    };
  },
  created() {},
  mounted(){
      // 获取父组件传过来的搜索参数
    this.$bus.$off("SeachInvoice");
    this.$bus.$on("SeachInvoice", (item) => {
      this.seachdata = item;
      this.getinvoicelistfn(item);
    });
  },
  methods: {
     //获得省份
    getProvince() {
      return CodeToText[this.selectExpertInfo.province];
    },
    //获得城市
    getCity() {
      return CodeToText[this.selectExpertInfo.city];
    },
      //查询列表
    async Invoicelist(val) {
      console.log(val, "val");
      this.masetrid = val;
      await this.getinvoicelistfn();
    },
     //查询发票记录
    async getinvoicelistfn(arr) {
      let newdata = {
        circleId: this.masetrid,
        no: arr && arr.no,
        status: arr && arr.status,
        type: arr && arr.type,
        pageNum:this.pageing.pageNum,
        pageSize:this.pageing.pageSize
      };
      let { code, rows,total } = await getinvoicelist(newdata);
      if (code == 200) {
        this.pageing.total=total
        // this.getinvoicelisttable = rows;
        let filterData = rows;
        filterData.forEach((item) => {
          if (item.amount) {
            item.amount = this.$options.filters["sumFilters"](item.amount);
          }
        });
        this.getinvoicelisttable = filterData;
      }
    },
    // 转时间格式 220901
    getTime(days) {
      let time = days.split(" ")[0];
      let arr = time.split("-");
      return arr[0].slice(2) + arr[1] + arr[2];
    },

    //状态的判断
    selecstatus(value) {
      const stateMap = {
        1: "未开票",
        2: "已开票",
        3: "已邮寄",
      };
      return stateMap[value];
    },
    selectype(value) {
      const typeMap = {
        1: "增值税普通发票",
        2: "增值税专用发票",
      };
      return typeMap[value];
    },
    selecttitle(value) {
      const typeMap = {
        1: "个人",
        2: "企业",
      };
      return typeMap[value];
    },
    //查询对应ID订单信息
    async getinvoiceidlistfn(id) {
      let newdata = {
        id: id,
        pageNum: this.pageing.pageNum,
        pageSize: this.pageing.pageSize,
        total: this.pageing.total,
      };
      let { code, data } = await getinvoiceidlist(newdata);
      if (code != 200) return;
      this.oderlist = JSON.parse(JSON.stringify(data));
      console.log(this.oderlist, "123");
      this.oderlist.orderList.forEach((item) => {
        console.log(item, "111");
        if (item.remark) {
          item.remark = item?.remark.slice(
            item?.remark.indexOf("：") +1,
            item?.remark.lastIndexOf("；")
            
          );
          
        }
      });
       // province: "",//省 city: "",//市 location:"",//区
      this.province =
        CodeToText[this.oderlist.cityCode.slice(0, 2) + "0000"];
      this.city = CodeToText[this.oderlist.cityCode.slice(0, 4) + "00"];
      this.location = CodeToText[this.oderlist.cityCode];
    },
    //邮递快递订单信息
    async editinvoiceidlistfn() {
      this.oderlist.kddh = this.formInline.kddh;
      this.oderlist.kdgs = this.formInline.kdgs;
      this.oderlist.kdTime = this.formInline.kdTime;
      this.oderlist.status = "3";
      console.log(this.oderlist, "123");
      let { code, msg } = await editinvoiceidlist(this.oderlist);
      if (code == 200) {
        this.$message({
          showClose: true,
          message: msg,
          type: "success",
        });
        this.drawer = false;
        this.oderlist.kddh = "";
       this.oderlist.kdgs = "";
      this.oderlist.kdTime = "";
      this.getinvoicelistfn(this.userid);

      }
    },
    RowClickFn(row) {
      this.getinvoiceidlistfn(row.id);
      this.userid = row.id;
    },
    //关闭抽屉
    handleClose() {
      this.drawer = false;
      this.invoice = false;
      this.makeinvoice = true;

      // this.$nextTick(() => {
      //       this.$refs["form"].clearValidate();
      //     });
    },
    invoiceclick() {
      this.invoice = true;
      this.makeinvoice = false;
    },
    cancel() {
      this.invoice = false;
      this.makeinvoice = true;
    },
    //发票邮寄
    postinvoiceclick() {
      this.invoice = true;
      this.postinvoice = false;
      console.log("33123");
    },
    //未开票完成开票确认按钮
    async submit(value) {
      console.log(value, "value");
      var myDate = new Date();
      var year = myDate.getFullYear(); //获取当前年
      var mon = myDate.getMonth() + 1; //获取当前月
      var date = myDate.getDate(); //获取当前日
      var hours = myDate.getHours(); //获取当前小时
      var minutes = myDate.getMinutes(); //获取当前分钟
      var seconds = myDate.getSeconds(); //获取当前秒
      var now =
        year +
        "-" +
        mon +
        "-" +
        date +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds;
       let obj = {
        no: this.Invoicecode,
        status: 2,
        updatedTime: now,
      };
      let data = Object.assign(value, obj);
      console.log(data, "data"); 
      let { code, msg } = await editinvoiceidlist(data);
      if (code == 200) {
        this.$message({
          message: "操作成功",
          type: "success",
        });
      }
      this.drawer = false;
      this.Invoicecode=""
      this.getinvoicelistfn(this.userid);

    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.editinvoiceidlistfn();
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleCurrentChange(pageNum) {
      this.pageing.pageNum = pageNum;
      this.getinvoicelistfn(this.seachdata);
    },
    // 页容量发生改变
    handleSizeChange(pageSize) {
      this.pageing.pageSize = pageSize;
      this.getinvoicelistfn(this.seachdata);
    },
  },
};
</script>

<style  scoped>
>>> .el-drawer__body {
  height: 100%;
  /* margin-bottom: 50px; */
}
>>> .el-drawer__body .el-row {
  height: 100%;
  overflow-y: auto;
}

.businEdit {
  height: 100%;
  padding: 20px;
  margin-bottom: 50px;
}
>>> .businEdit  ::-webkit-scrollbar {
  width: 0;
}

.el-descriptions {
  font-size: 14px;
  /* border-bottom: 1px solid #999999; */
  color: #2e405e;
}
/* 遮盖右边 */
.drawer-title {
  font-size: 12px;
  font-weight: 400;
  color: #99a2b1;
}
.codeclass {
  margin: 0 20px;
  height: 40px;
  background-color: #f4f5f8;
  line-height: 40px;
  padding-left: 10px;
}
.subBtn .el-input--medium {
  margin: 0 10px;
}
.fpbtn {
  margin: 20px 80px;
}
.fpbtn button {
  width: 120px;
  margin: 10px;
  /* background-color: #E0770A; */
  /* color: white; */
  border: 0;
  height: 40px;
  /* line-height: 30px; */
}
.fpbtn .yjfp {
  background-color: #e0770a;
  color: white;
}
.formbtn {
  margin-left: 40px;
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 165px;
}
</style>>

